<!-- src/components/admin/CourseManagement.vue -->
<template>
  <div>
    <h1>课程管理</h1>
    <div class="toolbar">
      <el-select v-model="sortBy" placeholder="请选择排序方式" @change="sortCourses">
        <el-option label="ID升序" value="idAsc"></el-option>
        <el-option label="ID降序" value="idDesc"></el-option>
        <el-option label="课程名升序" value="nameAsc"></el-option>
        <el-option label="课程名降序" value="nameDesc"></el-option>
      </el-select>
      <el-button type="primary" @click="addDialogVisible = true">添加课程</el-button>
    </div>

    <!-- 添加课程模态框 -->
    <el-dialog title="添加课程" :visible.sync="addDialogVisible" width="30%">
      <el-form :model="newCourse" label-width="120px">
        <el-form-item label="课程名">
          <el-input v-model="newCourse.name"></el-input>
        </el-form-item>
        <el-form-item label="授课老师">
          <el-input v-model="newCourse.teacher"></el-input>
        </el-form-item>
        <el-form-item label="上课时间">
          <el-input v-model="newCourse.time"></el-input>
        </el-form-item>
        <el-form-item label="学分">
          <el-input v-model="newCourse.credits"></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <el-input v-model="newCourse.category"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCourse">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改课程模态框 -->
    <el-dialog title="修改课程" :visible.sync="editDialogVisible" width="30%">
      <el-form :model="currentCourse" label-width="120px">
        <el-form-item label="课程名">
          <el-input v-model="currentCourse.name"></el-input>
        </el-form-item>
        <el-form-item label="授课老师">
          <el-input v-model="currentCourse.teacher"></el-input>
        </el-form-item>
        <el-form-item label="上课时间">
          <el-input v-model="currentCourse.time"></el-input>
        </el-form-item>
        <el-form-item label="学分">
          <el-input v-model="currentCourse.credits"></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <el-input v-model="currentCourse.category"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCourse">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 确认删除对话框 -->
    <el-dialog title="确认删除" :visible.sync="deleteDialogVisible" width="30%">
      <span>确定要删除该课程吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 课程列表 -->
    <el-table :data="sortedCourses" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="课程名" width="180"></el-table-column>
      <el-table-column prop="teacher" label="授课老师"></el-table-column>
      <el-table-column prop="time" label="上课时间"></el-table-column>
      <el-table-column prop="credits" label="学分"></el-table-column>
      <el-table-column prop="category" label="类别"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="editCourse(scope.row)">修改</el-button>
          <el-button type="danger" @click="openDeleteDialog(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "CourseManagement",
  data() {
    return {
      courses: [
        // 示例数据，实际数据应从后端获取
        { id: 1, name: '数学', teacher: '张老师', time: '周一 9:00-11:00', credits: 4, category: '理科' },
        { id: 2, name: '英语', teacher: '李老师', time: '周二 14:00-16:00', credits: 3, category: '文科' },
      ],
      sortBy: '',
      addDialogVisible: false,
      editDialogVisible: false,
      deleteDialogVisible: false,
      newCourse: {
        name: '',
        teacher: '',
        time: '',
        credits: '',
        category: ''
      },
      currentCourse: {
        id: null,
        name: '',
        teacher: '',
        time: '',
        credits: '',
        category: ''
      },
      currentCourseId: null,
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  computed: {
    sortedCourses() {
      let sorted = this.courses.slice();
      switch (this.sortBy) {
        case 'idAsc':
          sorted.sort((a, b) => a.id - b.id);
          break;
        case 'idDesc':
          sorted.sort((a, b) => b.id - a.id);
          break;
        case 'nameAsc':
          sorted.sort((a, b) => a.name.localeCompare(b.name));
          break;
        case 'nameDesc':
          sorted.sort((a, b) => b.name.localeCompare(a.name));
          break;
      }
      return sorted.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
    }
  },
  methods: {
    sortCourses() {
      // 排序逻辑在 computed 属性中处理
    },
    addCourse() {
      // 添加新课程逻辑
      this.courses.push({ ...this.newCourse, id: this.courses.length + 1 });
      this.addDialogVisible = false;
      this.newCourse = {
        name: '',
        teacher: '',
        time: '',
        credits: '',
        category: ''
      };
      this.total = this.courses.length;
    },
    editCourse(course) {
      // 打开修改模态框并填充当前课程的数据
      this.currentCourse = { ...course };
      this.editDialogVisible = true;
    },
    saveCourse() {
      // 保存修改后的课程数据
      const index = this.courses.findIndex(course => course.id === this.currentCourse.id);
      if (index !== -1) {
        this.courses.splice(index, 1, { ...this.currentCourse });
      }
      this.editDialogVisible = false;
    },
    openDeleteDialog(id) {
      this.currentCourseId = id;
      this.deleteDialogVisible = true;
    },
    confirmDelete() {
      this.courses = this.courses.filter(course => course.id !== this.currentCourseId);
      this.deleteDialogVisible = false;
      this.total = this.courses.length;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  },
  mounted() {
    this.total = this.courses.length;
  }
};
</script>

<style scoped>
.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>
